<template>
	<Row
		v-if="searchList.length"
		class="m-view-common-search-box"
		:gutter="16"
	>
		<Form @submit.native.prevent>
			<Col
				v-for="(item, index) in searchList"
				:key="index"
				:span="item.config.identity==='createTime'? 8 :6"
			>
				<FormItem
					v-show="index < 3 || (index >= 3 && showAll)"
					:label="item.config.label"
				>
					<template v-if="useInputList.indexOf(item.config.identity) > -1">
						<Input
							v-model="item.value"
							:placeholder="'请输入' + item.config.label"
							clearable
							class="item"
						/>
					</template>
					<template v-else-if="useDateList.indexOf(item.config.identity) > -1">
						<DatePicker
							v-model="item.value"
							value-format="yyyy-MM-dd HH:mm:ss"
							format="yyyy-MM-dd HH:mm:ss"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							class="item"
							type="datetimerange"
							clearable
						/>
					</template>
					<template v-else-if="useSelectList.indexOf(item.config.identity) > -1">
						<Select
							v-model="item.value"
							:placeholder="'请选择' + item.config.label"
							clearable
							filterable
							class="item"
							:multiple="item.searchMultiple"
						>
							<Option
								v-for="(oItem, i) in item.options"
								:key="i"
								:label="oItem[item.props.props.label]"
								:value="oItem[item.props.props.value]"
							/>
						</Select>
					</template>
					<template v-else>
						<template
							v-if="
								item.config.identity === 'numInput' ||
									item.config.identity === 'calculate'
							"
						>
							<McNumRange v-model="item.value"/>
						</template>
						<template v-else-if="item.config.identity === 'cascader'">
							<Cascader
								v-model="item.value"
								:options="item.options"
								clearable
								:show-all-levels="item.showAllLevels"
								:props="item.props.props"
								filterable
								:placeholder="'请选择' + item.config.label"
								class="item"
							/>
						</template>
						<template
							v-else-if="
								item.config.identity === 'time' ||
									item.config.identity === 'timeRange'
							"
						>
							<TimePicker
								v-model="item.value"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								clearable
								:value-format="item.valueFormat"
								:format="item.format"
								is-range
								class="item"
							/>
						</template>
						<template v-else-if="item.config.identity === 'date'">
							<McDateRangePicker
								v-model="item.value"
								:type="item.type"
								clearable
								:value-format="item.valueFormat"
								:format="item.format"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								class="item"
							/>
						</template>
						<template v-else-if="item.config.identity === 'dateRange'">
							<DatePicker
								v-model="item.value"
								:type="item.type"
								clearable
								:value-format="item.valueFormat"
								:format="item.format"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								class="item"
							/>
						</template>
						<template v-else-if="item.config.identity === 'address'">
							<McAddress
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								:level="item.level"
								class="item"
								clearable
							/>
						</template>
						<template v-else-if="item.config.identity === 'treeSelect'">
							<McTreeSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								:options="item.options"
								:props="item.props.props"
								class="item"
								clearable
							/>
						</template>
						<template
							v-else-if="
								item.config.identity === 'createUser' ||
									item.config.identity === 'modifyUser'
							"
						>
							<McUserSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								clearable
								class="item"
							/>
						</template>
						<template
							v-else-if="
								item.config.identity === 'currOrganize' ||
									item.config.identity === 'comSelect'
							"
						>
							<McComSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								clearable
								class="item"
								:multiple="item.searchMultiple"
							/>
						</template>
						<template v-else-if="item.config.identity === 'currPosition'">
							<McPosSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								clearable
								class="item"
								:multiple="item.searchMultiple"
							/>
						</template>
						<template v-else-if="item.config.identity === 'groupSelect'">
							<McGroupSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								clearable
								class="item"
								:multiple="item.searchMultiple"
							/>
						</template>
						<template v-else-if="item.config.identity === 'roleSelect'">
							<McRoleSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								clearable
								class="item"
								:multiple="item.searchMultiple"
							/>
						</template>
						<template v-else-if="item.config.identity === 'userSelect'">
							<McUserSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								clearable
								class="item"
								:select-type="
									item.selectType != 'all' && item.selectType != 'custom'
										? 'all'
										: item.selectType
								"
								:able-dep-ids="item.ableDepIds"
								:able-pos-ids="item.ablePosIds"
								:able-user-ids="item.ableUserIds"
								:able-role-ids="item.ableRoleIds"
								:able-group-ids="item.ableGroupIds"
								:multiple="item.searchMultiple"
							/>
						</template>
						<template v-else-if="item.config.identity === 'usersSelect'">
							<McUsersSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								clearable
								class="item"
								:select-type="item.selectType"
								:able-ids="item.ableIds"
								:multiple="item.searchMultiple"
							/>
						</template>
						<template v-else-if="item.config.identity === 'posSelect'">
							<McPosSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								clearable
								class="item"
								:select-type="item.selectType"
								:able-dep-ids="item.ableDepIds"
								:able-pos-ids="item.ablePosIds"
								:multiple="item.searchMultiple"
							/>
						</template>
						<template v-else-if="item.config.identity === 'depSelect'">
							<McDepSelect
								v-model="item.value"
								:placeholder="'请选择' + item.config.label"
								clearable
								class="item"
								:select-type="item.selectType"
								:able-dep-ids="item.ableDepIds"
								:multiple="item.searchMultiple"
							/>
						</template>
						<template v-else-if="item.config.identity === 'autoComplete'">
							<McAutoComplete
								v-model="item.value"
								:placeholder="'请输入' + item.config.label"
								:total="item.total"
								clearable
								class="item"
								:relation-field="item.relationField"
								:template-json="item.templateJson"
								:interface-id="item.interfaceId"
							/>
						</template>
						<template v-else-if="item.config.identity === 'relationFormAttr'">
							<Input
								v-model="item.value"
								:placeholder="'请输入' + item.config.label"
							/>
						</template>
						<template v-else-if="item.config.identity === 'relationForm'">
							<McRelationForm
								v-model="item.value"
								:placeholder="t('请选择')"
								:config="item.config"
								clearable
								:column-options="item.columnOptions"
								:relation-field="item.relationField"
								:has-page="item.hasPage"
								:page-size="item.pageSize"
							/>
						</template>
						<template v-else-if="item.config.identity === 'switch'">
							<Select
								v-model="item.value"
								:placeholder="t('请选择')"
								clearable
							>
								<Option
									:value="1"
									:label="t('开')"
								/>
								<Option
									:value="0"
									:label="t('关')"
								/>
							</Select>
						</template>
					</template>
				</FormItem>
			</Col>
			<Col :span="6">
				<FormItem>
					<Button
						type="primary"
						icon="el-icon-search"
						@click="search()"
					>
						{{t('查询')}}
					</Button>
					<Button
						icon="el-icon-refresh-right"
						@click="reset()"
					>
						{{t('重置')}}
					</Button>
					<template v-if="searchList.length > 3">
						<Button
							v-if="!showAll"
							type="text"
							icon="el-icon-arrow-down"
							@click="showAll = true"
						>
							{{t('展开')}}
						</Button>
						<Button
							v-else
							type="text"
							icon="el-icon-arrow-up"
							@click="showAll = false"
						>
							{{t('收起')}}
						</Button>
					</template>
				</FormItem>
			</Col>
		</Form>
	</Row>
</template>

<script>
import {Row,Form,Col,FormItem,Input,DatePicker,Select,Option,Cascader,TimePicker,Button,Icon,Autocomplete} from 'element-ui';
import {cloneDeep,t} from '../../utils/index.js';
import {
	useInputList,
	useDateList,
	useSelectList,
} from '../../utils/config.js';

export default {
	components:{
		Row,
		Form,
		Col,
		FormItem,
		Input,
		DatePicker,
		Select,
		Option,
		Cascader,
		TimePicker,
		Button,
		Icon,
		Autocomplete,
	},
	props:{
		list:{
			type:Array,
			default:() => [],
		},
		initDataJson:{
			type:Object,
			default:() => {},
		},
	},
	data(){
		return {
			t,
			showAll:false,
			searchList:[],
			useInputList,
			useDateList,
			useSelectList,
		};
	},
	watch:{
		list:{
			handler:function(val){
				this.searchList = cloneDeep(val);
			},
			deep:true,
			immediate:true,
		},
		initDataJson:{
			handler:function(val){
				if(JSON.stringify(val) === '{}' || Object.keys(val).length === 0) return;
				const initData = val;
				this.searchList.forEach((searchItem) => {
					const key = searchItem.model;
					if(Object.prototype.hasOwnProperty.call(initData, key)){
						const value = initData[key];
						if(searchItem.searchMultiple){
							if(searchItem.identity === 'comSelect'){
								searchItem.value = Array.isArray(value) && Array.isArray(value[0]) ? value : [value];
							}else{
								searchItem.value = Array.isArray(value) ? value : [value];
							}
						}else{
							searchItem.value = value;
						}
					}
				});
			},
		},
	},
	methods:{
		setProps(componentList){
			componentList.forEach((cur) => {
				const config = cur.config;
				if(config.identity === 'cascader') cur.props.props.multiple = false;
			});
		},
		search(){
			const result = this.searchList
				.filter(({value}) => value != null && (Array.isArray(value) ? value.length > 0 : value !== ''))
				.map(({model, value}) => ({
					model,
					value:Array.isArray(value)
						? value.map((v) => (v == null || v === '') ? 0 : v)
						: [value == null || value === '' ? 0 : value],
					symbol:'EQ',
				}));
			this.$emit('search', result);
		},
		reset(){
			this.searchList = cloneDeep(this.list);
			this.$emit('reset');
		},
		treeReset(){
			this.searchList.forEach((item, index) => {
				this.$set(this.searchList, index, {...item, value:''});
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.m-view-common-search-box {
	background: #fff;
	flex-shrink: 0;
	// margin-bottom: 10px;
	padding: 15px 10px 0;
	position: relative;

	.el-form-item {
		width: 100%;
		display: flex;
		margin-bottom: 14px !important;

		.el-form-item__label {
			flex-shrink: 0;
			padding-right: 12px;
		}

		.el-form-item__content {
			flex: 1;
		}

		.el-input,
		.el-select,
		.el-cascader,
		.comSelect-container,
		.el-date-editor {
			width: 100%;
		}
	}

	.m-view-common-search-box-right {
		position: absolute;
		right: 10px;
		top: 15px;
	}
}
</style>